<template>
  
  <div class="page-main" v-title :data-title="dataTitle?dataTitle:'合同报工列表'">
    <FixedMenu/>
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>合同报工列表</span></div>
    <div class="container" v-infinite-scroll="handleInfiniteOnLoad">
      <div class="header">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col :xl="{ span: 14 }" :lg="{ span: 11 }">
            <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" />
            <a-button
              v-if="checkPermission(['WORK_REPORT_MANAGER'])"
              class="hte-btn add-btn"
              type="primary"
              icon="plus"
              @click="addProject"
              >创建</a-button
            >
            <a-button
              v-if="checkPermission(['WORK_REPORT_MANAGER', 'WORK_REPORT_ACCEPTER'])"
              class="hte-btn port-btn"
              @click="exportExcle"
              >导出</a-button
            >
            <a-button v-if="checkPermission(['WORK_REPORT_MANAGER'])" class="hte-btn port-btn" @click="removeProject"
              >删除</a-button
            >

            <a-button class="hte-btn port-btn" @click="addInfrastructure">发起基建单</a-button>
            <!-- <a-button class="hte-btn port-btn" @click="openHip">打开HIP</a-button> -->
            <a-switch
              v-if="!checkPermission(['WORK_REPORT_MANAGER', 'WORK_REPORT_ACCEPTER'])"
              checked-children="我的合同"
              un-checked-children="参与的合同"
              default-checked
              v-model="searchForm.searchMyProject"
              @change="handleSearch"
            />
          </a-col>
          <a-col :xl="{ span: 9 }" :lg="{ span: 13 }" class="input-ground">
            <a-input-group compact>
              <a-select v-model="keywordType" @change="changeKeyorkType">
                <a-select-option value="1"> 合同编号 </a-select-option>
                <a-select-option value="2"> 合同名称 </a-select-option>
                <a-select-option value="3"> 订单号 </a-select-option>
              </a-select>
              <a-input-search
                v-if="keywordType == '1'"
                v-model="searchForm.contractNumber"
                @search="handleSearch"
                placeholder="请按照关键字进行搜索"
              />
              <a-input-search
                v-else-if="keywordType == '2'"
                v-model="searchForm.contractName"
                @search="handleSearch"
                placeholder="请按照关键字进行搜索"
              />
              <a-input-search
                v-else-if="keywordType == '3'"
                v-model="searchForm.purchaseOrderNumber"
                @search="handleSearch"
                placeholder="请按照关键字进行搜索"
              />
            </a-input-group>
            <a-button class="hte-btn del-btn" @click="openSearchForm">高级搜索</a-button>
          </a-col>
        </a-row>
      </div>
      <a-checkbox-group v-model="checkedList" @change="onChangeCheckbox">
        <section v-for="item of records" :key="item.id">
          <div class="list-head">
            <a-checkbox :value="item.id"></a-checkbox>
            <!-- i-unfinished未开始 i-ongoing进行中-->
            <template v-for="(code, index) in codes.WorkReportProjectStatus">
              <i :key="index" v-if="code.code == item.status" :class="'i-status' + item.status">{{ code.name }}</i>
            </template>
            <span class="font-active" @click="toItemList(item.id)" :title="item.contractNumber">{{
              item.contractNumber
            }}</span>
            <span :title="item.contractName">{{ item.contractName }}</span>
            <span>
              <span
                >开始时间：<i>{{ formatDate(item.startTime || '', 'yyyy-MM-dd') }}</i></span
              >
              <span
                >结束时间：<i>{{ formatDate(item.endTime || '', 'yyyy-MM-dd') }}</i></span
              >
            </span>
          </div>
          <div class="list-content">
            <div class="flex-num1-box">
              <div :title="item.signCompany">签订公司：{{ item.signCompany }}</div>
              <div :title="item.supplierName" style="width: 25%">供应商名称：{{ item.supplierName }}</div>
              <div>
                <span>合同签订人：{{ item.signUser }}</span>
                <span>合同跟进人：{{ item.createOrderUser }}</span>
                <span>项目负责人：{{ item.followPerson }}</span>
              </div>
            </div>
            <div class="flex-num2-box">
              <div>
                <span>合同金额：{{ item.amount }}</span>
                <span>已付金额：{{ item.payAmount }}</span>
                <span>采购订单号：{{ item.busKey }}</span>
                <span>费用号：{{ item.costNumber }}</span>
              </div>
              <div class="flex-end">
                <span @click="toItemList(item.id)"><i class="iconfont icon-reportReserve"></i>报工任务单</span>
                <span @click="toProjectExecute(item.id)"><i class="iconfont icon-dingdan"></i>合同信息</span>
                <span @click="toProjectAttach(item.id)"><i class="iconfont-png icon-file"></i>合同附件</span>
              </div>
            </div>
          </div>
        </section>
      </a-checkbox-group>
      <a-pagination
        show-size-changer
        :default-current="1"
        :total="total"
        @change="pageChange"
        @showSizeChange="onShowSizeChange"
        :show-total="(total) => `共 ${total} 条记录`"
      />

      <a-empty class="empty-box" v-show="emptyFlag" />
      <div v-show="skeletonFlag">
        <a-skeleton active />
        <a-skeleton active />
        <a-skeleton active />
      </div>
      <div v-show="loaddingFlag" class="loading-container">
        <a-spin spinning :delay="10" tip="加载中" />
      </div>
      <div class="tips-box" v-show="!loaddingFlag && !emptyFlag">暂无更多数据</div>
    </div>
    <a-back-top class="backtodom" />
    <a-modal
      :visible="showSearchForm"
      width="70vw"
      :bodyStyle="{ padding: '10px' }"
      title="高级查询"
      @ok="handleToSearch"
      @cancel="handleToCancel"
    >
      <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="handleToSearch">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="报工状态">
              <a-select  mode="multiple" v-model="searchForm.statusList" style="width: 100%" allowClear>
                <a-select-option v-for="(code, index) in codes.WorkReportProjectStatus" :key="index" :value="code.code">
                  {{ code.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="合同编号">
              <a-input allow-clear v-model="searchForm.contractNumber" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="合同名称">
              <a-input allow-clear v-model="searchForm.contractName" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="合同跟进专员">
              <a-input allow-clear v-model="searchForm.createOrderUser" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目经理">
              <a-input allow-clear v-model="searchForm.proManager" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目负责人">
              <a-input allow-clear v-model="searchForm.followPerson" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="签订公司">
              <a-input allow-clear v-model="searchForm.signCompany" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="供应商名称">
              <a-input allow-clear v-model="searchForm.supplierName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="合同签订人">
              <a-input allow-clear v-model="searchForm.createUser" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="采购订单号">
              <a-input allow-clear v-model="searchForm.purchaseOrderNumber" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="费用支出号">
              <a-input allow-clear v-model="searchForm.costNumber" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8"> </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import { formatDate } from '@/utils/util'
import { UtilsMixin } from '@/mixins/UtilsMixin'
import { Modal } from 'ant-design-vue'
export default {
  mixins: [UtilsMixin],
  name: 'ProjectList',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    FixedMenu: () => import('@/views/workReport/home/FixedMenu')
  },
  data() {
    return {
      dataTitle:this.$route?this.$route.name:"",
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractReportList',
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      that: this,
      records: [],
      checkedList: [],
      indeterminate: false,
      checkAll: false,
      pageSizeOptions: ['10', '20', '50', '100'],
      scrollFlag: false,
      skeletonFlag: false, // 骨架
      emptyFlag: false,
      loaddingFlag: false, // 加载中
      addTaskLoading: false,
      total: 0,
      pageNo: 0,

      projectStatus: '2',
      projectSubStatus: '5',
      pageSize: 10,
      urls: {
        list: '/workReport/project/page',
        deleteBetch: '/workReport/project/deleteBetch',
        codes: '/manage/codeInfo/queryByTypes',
        psCodes: '/hte/contract/codes',
        myPermission: '/workReport/project/myPermission',
      },
      keyword: '',
      keywordType: '1',
      showSearchForm: false,
      searchForm: {
        searchMyProject: true,
      },
      codes: {},
      permission: [],
      isNoMore: false,
    }
  },
  mounted() {
    // window.addEventListener('scroll', this.handleScroll, true)
    // this.getList()
    this.fetchCodes()
    this.fetchPermission()
  },
  destroyed() {
    // window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    formatDate,
    fetchPermission() {
      getAction(this.urls.myPermission, { projectId: -1 }).then((res) => {
        if (res.success) {
          this.permission = res.result
        }
      })
    },
    checkPermission(powers) {
      let hasPower = false
      if (this.permission) {
        for (let p of powers) {
          if (this.permission.indexOf(p) > -1) {
            hasPower = true
            break
          }
        }
      }
      return hasPower
    },
    fetchPsCodes() {
      postAction(this.urls.psCodes, { codes: ['contract_status'] }).then((res) => {
        if (res.success) {
          this.codes = { ...this.codes, ...res.result }
        }
      })
    },
    fetchCodes() {
      getAction(this.urls.codes, { types: 'WorkReportProjectStatus' }).then((res) => {
        if (res.success) {
          this.codes = { ...this.codes, ...res.result }
        }
      })
    },
    /**
     * check 选中及全选
     */
    onChangeCheckbox(checkedList) {
      this.checkedList = checkedList
      this.indeterminate = !!checkedList.length && checkedList.length < this.records.length
      this.checkAll = checkedList.length === this.records.length
    },
    onCheckAllChange(e) {
      let ids = []
      for (let r of this.records) {
        ids.push(r.id)
      }
      Object.assign(this, {
        checkedList: e.target.checked ? ids : [],
        indeterminate: false,
        checkAll: e.target.checked,
      })
    },
    removeProject() {
      if (this.checkedList.length == 0) {
        return this.$messageWorkReport.warning('请选择需要删除的行')
      }

      let that = this
      Modal.confirm({
        title: '确认删除',
        content: '是否删除选中数据?',
        onOk: function () {
          getAction(that.urls.deleteBetch, { ids: that.checkedList.join(',') }).then((res) => {
            if (res.success) {
              that.pageNo = 1
              that.getList()
            } else {
              that.$messageWorkReport.warning(res.message)
            }
          })
        },
      })
    },

    /**
     * 查询
     */
    handleSearch() {
      this.pageNo = 1
      this.getList()
    },
    handleToSearch() {
      this.pageNo = 1
      this.getList()
    },
    handleToCancel() {
      this.showSearchForm = false
    },
    openSearchForm() {
      this.showSearchForm = true
    },
    changeKeyorkType() {
      if (this.keywordType == '1') {
        this.$set(this.searchForm, 'contractName', '')
        this.$set(this.searchForm, 'busKey', '')
      } else if (this.keywordType == '2') {
        this.$set(this.searchForm, 'busKey', '')
        this.$set(this.searchForm, 'contractNumber', '')
      }else if (this.keywordType == '3') {
        this.$set(this.searchForm, 'contractName', '')
        this.$set(this.searchForm, 'contractNumber', '')
      }
    },
    getList(type) {
      if (this.loaddingFlag) {
        return
      }
      this.loaddingFlag = true
      if (type !== 'scroll') {
        this.skeletonFlag = true
        this.emptyFlag = false
        // this.pageNo = 1
        this.records = []
      }
      this.$set(this.searchForm, 'pageSize', this.pageSize)
      this.$set(this.searchForm, 'pageNo', this.pageNo)
      let that = this
      postAction(this.urls.list, this.searchForm).then((res) => {
        if (res.code == 200) {
          if (res.result && res.result.records.length > 0) {
            if (type === 'scroll') {
              res.result.records = that.records.concat(res.result.records)
              that.loaddingFlag = false // 加载中
            } else {
              that.skeletonFlag = false
            }
            that.records = res.result.records
            that.scrollFlag = true
          } else {
            if (type === 'scroll') {
              that.scrollFlag = false
              that.loaddingFlag = false // 加载中
            } else {
              that.emptyFlag = true
              that.skeletonFlag = false
            }
          }
        } else {
          that.$messageWorkReport.warning('数据加载失败:' + res.message)
        }
        if (that.pageNo == res.result.pages) {
          that.isNoMore = true
        }
        that.total = res.result.total
        that.showSearchForm = false
        that.loaddingFlag = false
      })
    },
    handleInfiniteOnLoad() {
      if (!this.isNoMore && !this.loaddingFlag) {
        this.scrollFlag = false
        this.pageNo = this.pageNo + 1
        this.getList('scroll')
      }
    },
    toItemList(id) {
      let urlJump = this.$router.resolve({ path:'/workReport/taskList?projectId=' + id })
                window.open(urlJump.href, '_blank')
    },
    toProjectExecute(id) {
      let urlJump = this.$router.resolve({ path:'/workReport/execute/' + id })
                window.open(urlJump.href, '_blank')
    },
    toMyTask() {
      let urlJump = this.$router.resolve({ path:'/workReport/myTaskList' })
      window.open(urlJump.href, '_blank')
    },
    toProjectAttach(id) {
      let urlJump = this.$router.resolve({ path:'/workReport/attach/' + id })
      window.open(urlJump.href, '_blank')
    },
    toPayment() {
      let urlJump = this.$router.resolve({ path:'/workReport/paymentList' })
      window.open(urlJump.href, '_blank')
    },
    toQuality() {
      let urlJump = this.$router.resolve({ path:'/workReport/qualityList' })
      window.open(urlJump.href, '_blank')
    },
    pageChange(pageNo, pageSize) {
      this.pageSize = pageSize
      this.pageNo = pageNo
      this.getList()
    },
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
      this.pageNo = 1
      this.getList()
    },
    exportExcle() {
      let url = process.env.VUE_APP_API_BASE_URL + '/workReport/project/export?1=1'
      this.handleExportXls('报工项目', url, this.searchForm)
    },
    addProject() {
      let urlJump = this.$router.resolve({ path:'/workReport/addProject' })
      window.open(urlJump.href, '_blank')
    },
    toInfrastructure() {
      let urlJump = this.$router.resolve({ path:'/infrastructure/list' })
      window.open(urlJump.href, '_blank')
    },
    addInfrastructure() {
      if (!this.checkedList || this.checkedList.length != 1) {
        return this.$messageWorkReport.warning('请选择一条记录进行操作')
      }
      let urlJump = this.$router.resolve({ path:'/infrastructure/addByProject/' + this.checkedList[0] })
      window.open(urlJump.href, '_blank')
    },
    openHip() {
      if (!this.checkedList || this.checkedList.length != 1) {
        return this.$messageWorkReport.warning('请选择一条记录进行操作')
      }
      const token = Vue.ls.get(ACCESS_TOKEN)
      window.open(
        'http://localhost:8080/HIP/common/mainTree.do?rturl=%2FHIP%2Fprojectapply%2FprojectInfoList.do%3FhteOpen%3Dtrue%26hteId%3D' +
          this.checkedList[0] +
          '&hteToken=' +
          token
      )
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .banner {
    background-image: url(~@assets/contract-top.png);
  }
  .container {
    section {
      padding: 0;
      margin: 12px 0;
      background-color: #ffffff;
      border: solid 1px #e2e2e2;
      .list-head {
        background-color: #d9dee8;
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding: 7px 18px;
        overflow: hidden;
        display: flex;
        align-items: center;
        > i {
          padding: 5px 7px;
          font-size: 12px;
          color: #fff;
          background-color: #b3b3b3;
          border-radius: 2px;
          margin-left: 18px;
          &.i-status0 {
            background-color: @bg-color-btn;
          }
          &.i-status1 {
            background-color: #3eb177;
          }
          &.i-status2 {
            background-color: #2d2b91;
          }
          &.i-status3 {
            background-color: @bg-color-btn;
          }
        }
        > span {
          padding-left: 15px;
          &:nth-of-type(2) {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          &:last-child {
            float: right;
            span {
              font-weight: initial;
              color: #333;
              padding-left: 25px;
              font-weight: bold;
              i {
                color: #666;
                font-weight: inherit;
              }
            }
          }
        }
      }
      .list-content {
        background-color: #fff;
        padding: 15px 18px 15px 50px;
        font-size: 14px;
        color: #666666;
        > div {
          display: flex;
          &.flex-num1-box {
            > div {
              &:nth-child(1),
              &:nth-child(2) {
                width: 17%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-right: 1%;
                padding-right: 5px;
              }
              &:nth-child(1) {
                width: 28%;
                position: relative;
                &:after {
                  &:extend(.afterbg);
                }
              }
              &:nth-child(3) {
                width: 54%;
                display: flex;
                justify-content: flex-end;
                > span {
                  margin-left: 20px;
                }
              }
            }
          }
          &.flex-num2-box {
            margin-top: 15px;
            div:first-child {
              flex: 2;
              > span {
                margin-right: 42px;
              }
            }
          }
          .flex-end {
            justify-content: flex-end;
            display: flex;
            > span {
              margin-left: 18px;
              cursor: pointer;
              i {
                color: #77b9f1;
                margin-right: 2px;
              }
            }
          }
        }
      }
    }
    /deep/ .ant-checkbox-group {
      width: 100%;
      display: initial;
    }
    /deep/ .ant-col .ant-checkbox {
      padding: 0 19px;
    }
  }
  .icon-file {
    background-image: url('~@assets/file.png');
  }
  /deep/ .ant-btn > .anticon + span {
    margin-left: 3px;
  }
}
.font-active {
  cursor: pointer;
}

.iconfont-png {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 3px;
  background-repeat: no-repeat;
}
@media (max-width: 1170px) {
  .page-main .container section .list-content > div.flex-num1-box {
    flex-wrap: wrap;
    > div {
      &:nth-child(1),
      &:nth-child(2) {
        width: 48%;
      }
      &:nth-child(3) {
        width: 100%;
        justify-content: flex-start;
        > span {
          margin-right: 20px;
          margin-left: 0;
        }
      }
    }
  }
  .page-main .container section .list-content > div.flex-num2-box {
    display: block;
    margin-top: 0;
  }
}
</style>
